﻿<html>
<head>
    <title>@ViewBag.Title - 我的 ASP.NET 应用程序</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="Content/bootstrap.css" rel="stylesheet" type="text/css" />
	<link href="Content/Site.css" rel="stylesheet" type="text/css" />
     <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/bootstrap.js"></script>
	<script type="text/javascript" src="Scripts/birthday.js"></script>
	<script type="text/javascript" src="Scripts/jquery.cityselect.js"></script>
<script>  
$(function () {
   //加载省份列表信息
 $(document).ready(function () {
    //加载省份列表信息
    $.ajax({
        url: "/Scripts/Area.xml",
        dataType: "xml",
        success: function (xml) {
            $(xml).find("province").each(function () {                                                  //找到(province)省份节点;
                $("<option></option>").html($(this).attr("name")).appendTo("#SelProvince");             //加载(province)省份信息到列表中
            })
        }
    })
    //省份列表信息更改时，加载城市列表信息
    $("#SelProvince").change(function () {
        var value = $("#SelProvince").val();                                                            //省份值;
        if (value != "请选择") {
            $("#SelCity").css("display", "block").find("option").remove();                              //显示城市下拉列表框删除城市下拉列表中的数据;
            $("#SelCity").html("<option>请选择</option>");                                              //加载城市列表中的请选择;
            $("#SelArea").find("option").remove();                                                      //删除地区下拉列表中的数据;
            $("#SelArea").html("<option>请选择</option>")                                               //加载地区列表中的请选择;
            $.ajax({
                url: "/Scripts/Area.xml",
                dataType: "xml",
                success: function (xml) {
                    $(xml).find("[name='" + value + "']").find("city").each(function () {               //根据省份name属性得到子节点City节点name属性;
                        $("<option></option>").html($(this).attr("name")).appendTo("#SelCity");         //加载City(城市)信息到下拉列表中;
                    })
                }
            })
        }
    })
    //城市列表信息改变时，加载地区列表信息
    $("#SelCity").change(function () {
        var value = $("#SelCity").val();                                                                //城市值;
        if (value != "请选择") {
            $("#SelArea").css("display", "block").find("option").remove();                              //显示地区下拉列表框删除地区下拉列表中的数据;
            $("#SelArea").html("<option>请选择</option>");                                              //加载地区列表中的请选择;
            $.ajax({
                url: "/Scripts/Area.xml",
                dataType: "xml",
                success: function (xml) {
                    $(xml).find("[name='" + value + "']").find("country").each(function () {            //根据城市节点name得到子节点Area节点name属性;
                        $("<option></option>").html($(this).attr("name")).appendTo("#SelArea");         //加载到Area(地区)下拉列表中;
                    })
                }
            })
        }
    })
});
	$.ms_DatePicker({
            YearSelector: ".sel_year",
            MonthSelector: ".sel_month",
            DaySelector: ".sel_day"
    });
	$.ms_DatePicker();
	
}); 
</script> 
</head>
<body>
<div class="page" id="page">
<div class="newcard">
 <form class="form-horizontal">
  <div class="form-group" >
    <label for="nickname"  class="col-xs-3 control-label">昵称</label>
	 <div class="col-xs-9">
    <input type="text" class="form-control" id="nickname" placeholder="昵称">
	</div>
  </div>
  <div class="form-group" >
    <label for="nickname"  class="col-xs-3 control-label">性别</label>
	 <div class="col-xs-9">
   <label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 男
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 女
</label>
	</div>
  </div>
  <div class="form-group">
    <label for="phone"  class="col-xs-3 control-label">手机</label>
	 <div class="col-xs-9">
    <input type="text" class="form-control" id="phone" placeholder="昵称">
	</div>
  </div>
   <div class="form-group">
    <label for="email"  class="col-xs-3 control-label">邮箱</label>
	 <div class="col-xs-9">
    <input type="text" class="form-control" id="email" placeholder="邮箱">
	</div>
  </div>
    <div class="form-group" >
    <label for="QQ"  class="col-xs-3 control-label">QQ</label>
	 <div class="col-xs-9">
    <input type="text" class="form-control" id="nickname" placeholder="QQ">
	</div>
  </div>
   <div class="form-group">
    <label for="email"  class="col-xs-3 control-label">生日</label>
	 <div class="col-xs-9">
	 <div class="container-fluid">
  <div class="row">
  <div class="col-xs-2">月</div>
  <div class="col-xs-4"> <select id="sel_month"  class="form-control"></select></div>
  <div class="col-xs-2">日</div>
  <div class="col-xs-4"><select id="sel_day"  class="form-control"></select></div>
  </div>
</div>
	</div>
  </div>
    <div class="form-group">
    <label for="email"  class="col-xs-3 control-label">年龄</label>
	 <div class="col-xs-9">
        <select id="yearrange"  class="form-control">
		  <option value ="0">0-10</option>
          <option value ="1">10-20</option>
          <option value="2">20-30</option>
          <option value="3">30-40</option>
		  <option value="4">40-50</option>
		</select>
	</div>
  </div>
   <div class="form-group">
    <label for="reion"  class="col-xs-3 control-label">地区</label>
	 <div id="city_1" class="col-xs-9">
	 <div class="container-fluid">
  <div class="row">
  <div class="col-xs-2">省</div>
  <div class="col-xs-4"><select id="SelProvince" class="form-control">
                    <option>请选择</option>
                </select></div>
  <div class="col-xs-2">城</div>
  <div class="col-xs-4"> <select id="SelCity" class="form-control">
                    <option>请选择</option>
                </select></div>
  </div>
</div>
	</div>
  </div>
  <button type="submit" class="btn btn-success btn-lg btn-block">提交</button>
</form>
</div>
</div>
</body>
</html>